<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="icon" type="image/x-icon" href="img/favicon.png">
    <script src="js/jquery-3.2.1.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link href="css/star-rating.min.css" rel="stylesheet">
    <script src="js/star-rating.min.js"></script>
    <title>日报</title>
    <style type="text/css">
        * {
            margin: 0;
            border: 0;
            padding: 0;
        }

        #header {
            height: 40pt;
            background-color: cornflowerblue;
            box-shadow: 0 1px 5px black;
            margin-bottom: 50px;
            padding-left: 40px;
            padding-right: 40px;
            padding-top: 5px;
            color: white;
        }

        #logo {
            width: 140px;
            height: 40px;
        }

        #header h1 {
            color: white;
            margin: 0;
        }
    </style>
</head>
<body>
<div class="row" id="header">
    <a href="index.html"><img src="img/logo.png" id="logo" class="pull-left"/></a>
    <div class="pull-right">
        <a href="board.html"><h1>日报</h1></a>
    </div>
</div>
<div class="row">
    <div id="leftbar" class="hidden-xs col-sm-1 clo-md-2 col-lg-3">
    </div>
    <div class="col-xs-12 col-sm-10 col-md-8 col-lg-6" id="middlebar">
        <form id="main-form">
            <div class="form-group">
                <label for="name">姓名</label>
                <input type="text" class="form-control" id="name" name="name" placeholder="你的名字">
            </div>
            <div class="form-group">
                <label for="score">今日评价</label>
                <input id="score" value="0" type="number" class="rating" min=0 max=5 step=0.5 data-size="sm">  
            </div>
            <div class="form-group">
                <label for="works">完成工作</label>
                <textarea class="form-control" id="works" name="works" placeholder="我什么也没做" rows="4" ></textarea>
            </div>
            <div class="form-group">
                <label for="workTime">实际工作时长</label>
                <div class="input-group" style="width: 250px">
                    <div class="input-group-addon">共计</div>
                    <input id="workTime" type="number" name="workTime" placeholder="0" class="form-control" value="0">
                    <div class="input-group-addon">小时</div>
                </div>
            </div>
            <div class="form-group">
                <label for="playTime">娱乐时长</label>
                <div class="input-group" style="width: 250px">
                    <div class="input-group-addon">共计</div>
                    <input id="playTime" type="number" name="playTime" placeholder="24" class="form-control" value="24">
                    <div class="input-group-addon">小时</div>
                </div>
            </div>
            <div class="form-group">
                <label for="plan">明天的计划</label>
                <textarea class="form-control" id="plan" name="plan" placeholder="我什么也不想做" rows="4"></textarea>
            </div>
            <div class="form-group">
                <label for="planWork">明天要工作</label>
                <div class="input-group" style="width: 250px">
                    <div class="input-group-addon">至少</div>
                    <input id="planWork" type="number" name="planWork" placeholder="0" class="form-control" value="0">
                    <div class="input-group-addon">小时， I think</div>
                </div>
            </div>
            <div class="form-group">
                <label for="planPlay">明天玩儿</label>
                <div class="input-group" style="width: 250px">
                    <div class="input-group-addon">最多</div>
                    <input id="planPlay" type="number" name="planPlay" placeholder="24" class="form-control" value="24">
                    <div class="input-group-addon">小时，I promise</div>
                </div>
            </div>
        </form>
        <button class="btn btn-default" onclick="postForm()">提交</button>
        <script>
            function focusinAction() {
                this.value = null;
            }

            function focusoutAction() {
                if( this.value === null || this.value === "") this.value = this.defaultValue;
            }
            var form_control = $(".form-control");
            form_control.one("focusin",focusinAction);
            form_control.on("focusout", focusoutAction);
            function postForm() {
                var name = document.getElementById("name").value;
                if (name === "" || name === null) name = "No one";
                var score = document.getElementById("score").value;
                var works = document.getElementById("works").value;
                if (works === "" || works === null) works = "我今天什么也没做";
                var plan = document.getElementById("plan").value;
                if (plan === "" || plan === null) plan = "我明天什么也不想做";
                var workTime = document.getElementById("workTime").value;
                var playTime = document.getElementById("playTime").value;
                var planPlay = document.getElementById("planPlay").value;
                var planWork = document.getElementById("planWork").value;
                var formData = {
                    name,
                    score,
                    works,
                    plan,
                    workTime,
                    playTime,
                    planPlay,
                    planWork
                };
                console.log(JSON.stringify(formData));
                $.ajax(
                    {
                        type: "POST",
                        url: "/report",
                        data: JSON.stringify(formData),
                        dataType: "json",
                        contentType: "application/json",
                        success: alertSuccess,
                        error: function (jqXHR, textStatus, errorThrown) {
                            alert(textStatus);
                        }
                    }
                );
            }

            function alertSuccess() {
                alert("提交成功");
                self.location = 'board.html';
            }
        </script>
    </div>
    <div id="right-bar" class="hidder-xs col-sm-1 clo-md-2 col-lg-3">
    </div>
</div>
</body>
</html>